<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setter</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="case11-demo3">
    <p>{{site}}</p>
</div>
<script type="text/javascript">
    var case11Demo3=new Vue({
        el:"#case11-demo3",
        data:{
            name:"Google",
            url:"http://www.google.cn/"
        },
        computed:{
            site:{
                //getter
                get:function () {
                    return this.name+" "+this.url
                },
                //setter
                set:function (newValue) {
                    //names时一个数组 names[0]:"Apple names[1]:https://www.apple.com.cn/
                    var names=newValue.split(" ")
                    this.name=names[0]
                    this.url=names[names.length-1]
                    console.log(names)
                }
            }
        }
    })
    //调用setter，case11Demo3.name和case11Demo3.url也会被对应更新
    case11Demo3.site="Apple https://www.apple.com.cn/";
    document.write("name:"+case11Demo3.name)
    document.write("<br>")
    document.write("url:"+case11Demo3.url)

</script>
</body>
</html>